<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    {% comment %}<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>{% endcomment %}
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="/static/plugins/echarts.min.js" type="application/javascript"></script>
    <script src="/static/js/default.js" type="application/javascript"></script>
    <script src="/static/js/common.js" type="application/javascript"></script>
    <style>
        .container{
            width: 1200px;
        }
        .container h1{
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>列表页面</h1>
        <div>
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">姓名</th>
                  <th scope="col">性别</th>
                  <th scope="col">年龄</th>
                  <th scope="col" width="20%">操作</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            <button class="btn btn-primary" id="addPageBtn">返回添加页面</button>
            <button class="btn btn-primary" id="indexPageBtn">返回首页</button>
        </div>
        <div>
            <ul class="list-unstyled">
                <li>交互：底层封装了ajax，调用方式：utils.post(请求地址，传递参数JSON，成功回调函数，异常回调函数，是否显示加载提示：默认为true)</li>
                <li>询问：底层封装了dialog，调用方式：utils.confirm(标题，提示内容，确认回调函数，取消回调函数，按钮名称：默认为确定和关闭)</li>
            </ul>
        </div>
    </div>

<script>
$(function(){
    reload();
    $("#addPageBtn").click(function(){
        window.location.href = "/person/add";
    });
    $("#indexPageBtn").click(function(){
        window.location.href = "/";
    });
});

function reload(){
    utils.post('/person/query',{},function(result){
        if(result.status == 'OK'){
            var data = JSON.parse(result.data);
            console.log(data)
            var tr = [];
            $("tbody").html('');
            for (var i in data){
                var td = [];
                var j = Number(i) + 1;
                td.push('<th scope="row">' + j + '</th>');
                td.push('<td>' + data[i].name + '</td>');
                td.push('<td>' + data[i].gender + '</td>');
                td.push('<td>' + data[i].age + '</td>');
                td.push('<td><a class="btn btn-primary" href="javascript:update(' + data[i].id + ');">修改</a>&nbsp;<a class="btn btn-primary" href="javascript:del(' + data[i].id + ');">删除</a></td>');
                tr.push('<tr>' + td.join('') + '</tr>');
            }
            $("tbody").append(tr.join(''));
        }
    },function(){})
}
function update(id){
    window.location.href = "/person/update?id=" + id;
}
function del(id){
    utils.confirm('提示','是否要删除？',function(){
        utils.post('/person/del',{id: id},function(result){
            if(result.status == 'OK'){
                utils.toast(result.message)
                reload()
            }
        });
    });

}

</script>
</body>
</html>